import React from 'react'
import { useEffect, useState } from 'react'
import {
  Modal,
  NavBar,
  Icon,
  WingBlank,
  WhiteSpace,
  InputItem,
  Button,
  Toast,
} from 'antd-mobile'
import { Link } from 'react-router-dom'

import './index.less'
import { reqVerifyPhone } from "../../../api/register";

const alert = Modal.alert

export default function RegisterPhone(props) {
  // props就是父组件传递的props数据
  const { history, location } = props

  // useEffect 让工厂函数组件可以使用生命周期函数
  // 需求：只要执行一次，充当componentDidMount
  useEffect(() => {
    if(location.state)return
    alert(
      // 标题
      '注册协议及隐私政策',
      // 内容
      <span className="policy-content">
        在您注册成为硅谷用户的过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，
        <span className="policy-strong">
          请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体并下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）
        </span>
        <span className="policy-text">《硅谷用户注册协议》</span>
        <span className="policy-text">《硅谷隐私政策》</span>
      </span>,
      // 底部按钮
      [
        /*
          什么是路由组件？通过Route加载的组件
          路由组件会接收到Route传递的三个属性：location、history、match
            history.push()
            history.replace()
            history.go()
          工厂函数组件怎么接受props？工厂函数组件第一个参数，就是props
        */
        { text: '不同意', onPress: () => history.push('/login/code') },
        {
          text: '同意',
          // onPress: () => console.log('ok'),
          style: {
            backgroundColor: '#e94f4f',
            color: '#fff',
          },
        },
      ]
    )
    // [] useEffect的依赖项，一旦数组里面发生变化就会重新调用
    // 空数组没有内容，不会发生任何变化，只会执行一次
  }, [])

  const prefix = '+' + (location.state || '86')
  const [phone, setPhone] = useState('')
  const [isDisabled, setIsDisabled] = useState(true)
  // 手机号正则
  const phoneReg = /^1[3-9][0-9]{9}$/
  // 处理手机号发生变化的事件
  const handleInputChange = (val) => {
    
    if (phoneReg.test(val)) {
      setIsDisabled(false)
    } else {
      setIsDisabled(true)
    }
    setPhone(val)
  }
  // 点击同意，验证手机号是否注册
  const verifyPhone = async() => {
    const res=await reqVerifyPhone(phone)
  try{
    if(res.data.code===20000){
      history.push("/register/code", phone)
    }else{
        // 失败 手机号被注册了
      Toast.fail(res.data.message, 2)
    }
  }catch(e){
    console.log(e);
    Toast.fail("请求失败了~", 2);
  }
  }
  const next = () => {
    alert(
      // 标题
      '',
      // 内容
      `我们将发送短信/语音验证码至：${phone}`,
      // 底部按钮
      [
        { text: '不同意' },
        {
          text: '同意',
          // 发送请求，验证手机号是否注册过
          onPress: verifyPhone,
          style: {
            backgroundColor: '#e94f4f',
            color: '#fff',
          },
        },
      ]
    )
  }

  return (
    <div className="register-phone">
      <NavBar
        mode="light"
        icon={<Icon type="left" className="icon-left" />}
        onLeftClick={() => history.push('/login/code')}
      >
        硅谷注册
      </NavBar>
      <WingBlank size="lg">
        <WhiteSpace size="xl" />
        <InputItem
          className="input-item"
          placeholder="请输入手机号"
          clear
          onChange={handleInputChange}
          value={phone}
        >
          <Link to="/countryPicker" className="register-phone-prefix">
            <span >{prefix}</span>
            <Icon type="down" />
          </Link>
        </InputItem>
        <WhiteSpace size="xl" />
        <Button
          onClick={next}
          type="primary"
          className="btn"
          disabled={isDisabled}
        >
          下一步
        </Button>
      </WingBlank>
    </div>
  )
}
